<template>
  <el-aside class="index-aside" height="100vh" width="210px">
    <div class="index-aside-inner menulist" style="height:100%">
      <div v-for="item in menuList" :key="item.tableName" v-if="role==item.tableName" class="menulist-item"
           style="height:100%;broder:0;background-color:#525252">
        <div style="height: 60px; margin-bottom: 1px; color: #ffffff; background-color: #353535;
        display: flex; align-items: center; justify-content: center;">
          <div style="font-size: 18px; font-weight: 700; text-align: center;">
            济南大学数学科学学院
          </div>
        </div>
        <hr style="border: none; border-top: 1px solid #2d2d2d;">


        <el-menu mode="vertical" :unique-opened="true" class="el-menu-demo" style="height:100%;"
                 background-color= #353535  text-color="#ffffff" active-text-color="#a9de9e" default-active="0">

          <el-menu-item index="0" :style="menulistBorderBottom" @click="menuHandler('')">
            <i v-if="true" class="el-icon-s-home"/>首页
          </el-menu-item>

          <el-submenu :index="1 + ''" :style="menulistBorderBottom">
            <template slot="title">
              <i v-if="true" class="el-icon-user-solid"/>
              <span>个人中心</span>
            </template>
            <el-menu-item :index="1 + 100 + ''" @click="menuHandler('updatePassword')">修改密码</el-menu-item>
            <el-menu-item :index="1 + 100 + 1 + ''" @click="menuHandler('center')">个人信息</el-menu-item>
          </el-submenu>

          <el-submenu :style="menulistBorderBottom" v-for="(menu, index) in item.backMenu" :key="menu.menu" :index="(index + 100 + 2) + ''">
            <template slot="title">
              <i v-if="true" :class="icons[index]"/>
              <span>{{ menu.menu }}</span>
            </template>
            <el-menu-item v-for="(child, sort) in menu.child" :key="sort" :index="(index + 100 + 2) + '-' + sort" @click="menuHandler(child.tableName)">
              {{ child.menu }}
            </el-menu-item>
          </el-submenu>

        </el-menu>

      </div>
    </div>
  </el-aside>
</template>
<script>
import menu from '@/utils/menu'
import { getRole } from '@/utils/getrole';
import center from "@/views/center.vue";

export default {
  computed: {
    center() {
      return center
    }
  },
  data() {
    return {
      menuList: [],
      dynamicMenuRoutes: [],
      role: '',
      icons: [
        'el-icon-s-cooperation',
        'el-icon-s-order',
        'el-icon-s-platform',
        'el-icon-s-fold',
        'el-icon-s-unfold',
        'el-icon-s-operation',
        'el-icon-s-promotion',
        'el-icon-s-release',
        'el-icon-s-ticket',
        'el-icon-s-management',
        'el-icon-s-open',
        'el-icon-s-shop',
        'el-icon-s-marketing',
        'el-icon-s-flag',
        'el-icon-s-comment',
        'el-icon-s-finance',
        'el-icon-s-claim',
        'el-icon-s-custom',
        'el-icon-s-opportunity',
        'el-icon-s-data',
        'el-icon-s-check',
        'el-icon-s-grid',
        'el-icon-menu',
        'el-icon-chat-dot-square',
        'el-icon-message',
        'el-icon-postcard',
        'el-icon-position',
        'el-icon-microphone',
        'el-icon-close-notification',
        'el-icon-bangzhu',
        'el-icon-time',
        'el-icon-odometer',
        'el-icon-crop',
        'el-icon-aim',
        'el-icon-switch-button',
        'el-icon-full-screen',
        'el-icon-copy-document',
        'el-icon-mic',
        'el-icon-stopwatch',
      ],
      menulistStyle: 'vertical',
      menulistBorderBottom: {},
    }
  },
  mounted() {
    const menus = menu.list()
    this.menuList = menus
    getRole().then(role => {
      if (role){
        this.role = role
      }
    }).catch(error => {
      this.$message.error(error.message)
    })
  },
  created() {
    this.lineBorder()
  },
  methods: {
    lineBorder() {
      let style = 'vertical'
      let w = '1px'
      let s = 'solid'
      let c = '#000000'
      if (style == 'vertical') {
        this.menulistBorderBottom = {
          borderBottomWidth: w,
          borderBottomStyle: s,
          borderBottomColor: c
        }
      } else {
        this.menulistBorderBottom = {
          borderRightWidth: w,
          borderRightStyle: s,
          borderRightColor: c
        }
      }
    },
    menuHandler(name) {
      let router = this.$router;
      name = '/' + name;

      // 检查当前路由是否与目标路由相同

      if (!this.$route.path.includes("index") || name !== "/") {
        if (this.$route.path !== name) {
          router.push(name);
        }
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.index-aside {
  position: relative;
  overflow: hidden;

  .menulistImg {
    padding: 24px 0;
    box-sizing: border-box;

    .el-image {
      margin: 0 auto;
      width: 100px;
      height: 100px;
      border-radius: 100%;
      display: block;
    }
  }

  .index-aside-inner {
    height: 100%;
    overflow: scroll;
    margin-right: -17px;
    margin-bottom: -17px;
    overflow-x: hidden !important;
    padding-top: 0 !important;
    box-sizing: border-box;

    &:focus {
      outline: none;
    }

    .el-menu {
      border: 0;
    }
  }
}
</style>
